<template>
  <div>
    <el-dialog
      append-to-body
      title="选择商品"
      v-model="openStatus"
      :close-on-click-modal="false"
      @close="closeDialog">
      <div class="avue-crud">
        <el-table
          :data="dataList"
          @row-dblclick="selectId"
          border
          v-loading="dataListLoading">
          <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="title"
            header-align="center"
            align="center"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="sellPoint"
            header-align="center"
            align="center"
            label="卖点">
          </el-table-column>
          <el-table-column
            prop="price"
            header-align="center"
            align="center"
            label="价格">
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="num"-->
          <!--            header-align="center"-->
          <!--            align="center"-->
          <!--            label="库存数量">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="limitNum"-->
          <!--            header-align="center"-->
          <!--            align="center"-->
          <!--            label="售卖数量限制">-->
          <!--          </el-table-column>-->
          <el-table-column
            prop="image"
            header-align="center"
            align="center"
            label="图片">
            <template #="scope">
              　　　　 <img :src="scope.row.image"  width="80" height="80"
                        class="head_pic"/>
            </template>
          </el-table-column>
          <el-table-column
            prop="cid"
            header-align="center"
            align="center"
            label="所属分类">
          </el-table-column>
          <el-table-column
            prop="status"
            header-align="center"
            align="center"
            label="状态">
            <template #="scope">
              <el-tag type="info" v-if="scope.row.status === 0">下架</el-tag>
              <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            header-align="center"
            align="center"
            label="修改时间">
          </el-table-column>
          <el-table-column
            prop="createBy"
            header-align="center"
            align="center"
            label="创建人">
          </el-table-column>
          <el-table-column
            prop="updateBy"
            header-align="center"
            align="center"
            label="更新人">
          </el-table-column>
          <el-table-column
            prop="limitStatus"
            header-align="center"
            align="center"
            label="售卖限制,1-正常，0-已售">
          </el-table-column>
          <el-table-column
            prop="customType"
            header-align="center"
            align="center"
            label="身份">
          </el-table-column>
          <el-table-column
            prop="principal"
            header-align="center"
            align="center"
            label="本金">
          </el-table-column>
          <el-table-column
            prop="interest"
            header-align="center"
            align="center"
            label="利息">
          </el-table-column>
          <el-table-column
            prop="overdueMonth"
            header-align="center"
            align="center"
            label="逾期时间">
          </el-table-column>
          <el-table-column
            prop="commission1"
            header-align="center"
            align="center"
            label="诉讼佣金比例">
          </el-table-column>
          <el-table-column
            prop="commission2"
            header-align="center"
            align="center"
            label="非诉讼佣金比例">
          </el-table-column>
          <el-table-column
            prop="creditorAddress"
            header-align="center"
            align="center"
            label="债权人所在地">
          </el-table-column>
          <el-table-column
            prop="debtAddress"
            header-align="center"
            align="center"
            label="债务人所在地">
          </el-table-column>
          <el-table-column
            prop="guarantee"
            header-align="center"
            align="center"
            label="是否有担保">
          </el-table-column>
          <el-table-column
            prop="mortgage"
            header-align="center"
            align="center"
            label="是否有抵押">
          </el-table-column>
          <el-table-column
            prop="contact"
            header-align="center"
            align="center"
            label="是否失联">
          </el-table-column>
          <el-table-column
            prop="pay"
            header-align="center"
            align="center"
            label="是否有偿还能力">
          </el-table-column>
          <el-table-column
            prop="voucher"
            header-align="center"
            align="center"
            label="凭证是否齐全">
          </el-table-column>
          <el-table-column
            prop="hight"
            header-align="center"
            align="center"
            label="佣金比例高">
          </el-table-column>
          <el-table-column
            prop="law"
            header-align="center"
            align="center"
            label="法律关系明确">
          </el-table-column>
          <el-table-column
            prop="content"
            header-align="center"
            align="center"
            label="详细信息">
          </el-table-column>
          <el-table-column
            prop="contactPerson"
            header-align="center"
            align="center"
            label="联系人">
          </el-table-column>
          <el-table-column
            prop="tel"
            header-align="center"
            align="center"
            label="联系人电话">
          </el-table-column>

        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
       <el-button @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {fetchList} from '@/api/zhaikucloud/mallproduct'

export default {
  props: {
    productVisible: {
      type: Boolean
    },
  },
  data() {
    return {
      openStatus: this.productVisible,
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
    }

  },
  // watch: {
  //   productVisible(val) {
  //     this.openStatus = val;
  //   }
  // },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      })).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    selectId(row) {
      this.closeDialog(row.id)
    },
    closeDialog(id) {
      this.openStatus = false
      let obj = {state: false, productId: id}
      // this.$emit("childFn", "我是子组件参数");
      this.$emit("childFn", obj);
    },
  },
  created() {
    this.getDataList()
    this.openStatus = true;
    console.log(this.openStatus)
    console.log("我是子组件")
  }
}
</script>

<style scoped>

</style>
